<template>
  <div class="ProcessRender">
    <template v-for="(node, i) in ProcessNodesData || []" :key="node.getNodeId() + node.getNodeType()">
   
    <component @click="setSelectedNode(node)" :is="(NodeComponentsMap[node.getNodeType()])" ref="nodes" :data="node" :nodeList="ProcessNodesData"></component>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted,provide} from 'vue'
import { NodeComponentsMap } from './nodes';
import type { Ref,Component } from 'vue';
import useFlowNode from './hooks/useFlowNode';
import BaseFlowNode from './class/BaseFlowNode';
import StartNode from './class/flow-nodes/StartNode';
import RouteNode from './class/flow-nodes/RouteNode';
import ParallelNode from './class/flow-nodes/ParallelNode';
import ExclusiveNode from './class/flow-nodes/ExclusiveNode';
import ApprovalNode from './class/flow-nodes/ApprovalNode';
import EndNode from './class/flow-nodes/EndNode';
import CopyNode from './class/flow-nodes/CopyNode';
import { FlowRouteNodeType } from './types';
import TolerateNode from './class/flow-nodes/TolerateNode';
let emit = defineEmits(['changeSelectedNode'])

let ProcessNodesData:Ref<Array<BaseFlowNode>>=ref([]) 
const {addNode,removeNode,addRouteNodeBranch,setCurSelectedNode,CurSelectedNode,cancelCurSelectedNode} =useFlowNode(ProcessNodesData)
provide('addNode',addNode)
provide('removeNode',removeNode)
provide('addRouteNodeBranch',addRouteNodeBranch)
provide('setSelectedNode',setSelectedNode)
provide('cancelSelectedNode',cancelSelectedNode)
provide('CurSelectedNode',CurSelectedNode)
  const nodes:Ref<Array<Component>|null> = ref(null) // 节点组件实例
function initData(){
  ProcessNodesData.value.push(new StartNode(),
  new RouteNode( FlowRouteNodeType.PARALLEL,[[new ParallelNode(), new ApprovalNode()],[new ParallelNode()]]),
  new RouteNode(FlowRouteNodeType.EXCLUSIVE, [[new ExclusiveNode()],[new ExclusiveNode()]]),
  new ApprovalNode(),
  new RouteNode(FlowRouteNodeType.TOLERATE, [[new TolerateNode()],[new TolerateNode()]]),

  new CopyNode(),
  new EndNode())
}
initData()

function setSelectedNode(node:BaseFlowNode){
  setCurSelectedNode(node)
  emit('changeSelectedNode',CurSelectedNode.value)
}
function cancelSelectedNode(){
  cancelCurSelectedNode()
  emit('changeSelectedNode',CurSelectedNode.value)
}

defineExpose({
  cancelSelectedNode
})
</script>
<style  lang="less">
@import url('./styles/index.less');
</style>
<style scoped lang="less">
@import url('./styles/index.less');
.ProcessRender{
  width: 100%;
  height: 100%;
 
  padding: 60px;
  background-color: @main-bgc;
  display: flex;
  align-items: center;
  flex-direction: column;

}
</style>
